<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mouse Scroll</title>
  <style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0;
    }

    input {
      width: 100px;
      height: 100px;
      font-size: 80px;
      text-align: center;
      appearance: none;
      border: 0;
      font-family: "MaybeCuteFont";
    }

    @font-face {
      font-family: "MaybeCuteFont";
      src: url("../asset/font/MaybeCuteFont.otf");
    }
  </style>
</head>

<body>
  <input type='number' class='numsInput' value='00'>
  <script>
    var _input = document.querySelector('.numsInput')
    _input.onmousewheel = function (event) {
      console.log(event.wheelDelta) // Chrome 向上120 向下 -120
      var item = 1;
      if (event.wheelDelta < 0) {
        item = -1
      }
      console.log('event: ', event);
      // 阻止原来的事件处理
      event.preventDefault();
      console.log('_input: ', _input.value);
      var newVal = ''
      var nowVal = _input.value
      while (true) {
        if (nowVal.startsWith('0')) {
          nowVal = nowVal.slice(1)
        } else {
          if (nowVal == '') {
            nowVal = '0'
          }
          break
        }
      }
      console.log('nowVal:', nowVal);
      // nowVal++;
      nowVal = nowVal * 1 + item * 1;
      console.log('String(nowVal).length: ', String(nowVal).length);
      if (String(nowVal).length == 1) {
        nowVal = '0' + String(nowVal)
      }
      console.log('nowVal: ', nowVal);
      _input.value = nowVal
      // 最大值
      if (nowVal == 100) {
        console.log('nowVal: ', nowVal);
        _input.value = '01'
        return;
      }
      if (nowVal == -1) {
        console.log('nowVal: ', nowVal);
        _input.value = '99'
        return;
      }
    }
  </script>
</body>

</html>